<template>
  <view>
    <view class="treeOne" v-for="(item, i) in data" :key="i">
      <view
        class="one"
        :class="chooseMode === 'line' && item.choose ? 'active' : ''"
        @click.native.stop="select(item)"
      >
        <image
          @click.native.stop="open(item)"
          v-show="item.children != undefined && item.children.length"
          class="jt"
          :src="!item.openTag ? jtconr : jtconb"
        ></image>
        <image
          v-if="chooseMode === 'ico' && item.choose"
          class="chooseTag"
          :src="ico_choose"
        ></image>
        <text class="label">{{ item.label }}</text>
      </view>
      <view
        class="children"
        v-if="
          item.openTag &&
          item.children != undefined &&
          item.children.length != 0
        "
      >
        <treeSelectOne
          @getChooseValue="getValue"
          @openTagChange="openTagChange"
          :data="item.children"
          :allData="allData"
          :checkStrictly="checkStrictly"
          :multiple="multiple"
          :chooseMode="chooseMode"
          :showAllLevels="showAllLevels"
        ></treeSelectOne>
      </view>
    </view>
  </view>
</template>

<script setup>
import { defineProps, defineEmits } from "vue";
import treeSelectOne from "./oneselect.vue";
import ico_choose from "@/static/images/ico_choose.png";
import jtconr from "@/static/images/ico_jt_r.png";
import jtconb from "@/static/images/ico_jt_b.png";
// console.log(treeSelectOne);
const emits = defineEmits([
  "clogetChooseValuese",
  "openTagChange",
  "getChooseValue",
]);

const props = defineProps({
  data: Array,
  allData: Array, // 完整的树数据
  // 是否严格的遵守父子节点不互相关联
  checkStrictly: {
    type: Boolean,
    default: false,
  },
  // 是否多选
  multiple: {
    type: Boolean,
    default: false,
  },
  // 是否返回完整路径数据集
  showAllLevels: {
    type: Boolean,
    default: true,
  },
  // 选择模式，默认line，勾选模式ico
  chooseMode: {
    type: String,
    default: "line",
  },
});
// 获取
function getValue(ids, oldChoose) {
  // 错误数据
  // ids.push(this.chooseValue.id);
  emits("getChooseValue", ids, oldChoose); // 继续向上传递
}
function openTagChange(ids, openTag) {
  emits("openTagChange", ids, openTag);
}
// 打开下级菜单
function open(item) {
  const ids = findFid(props.allData, item.id, []);
  // 推完整路径，解决小程序，展开后选中父节点自动收起问题。
  emits("openTagChange", ids, !item.openTag);
}
// 点击选中一级
function select(item) {
  let tag = false;
  if (props.checkStrictly) {
    tag = true;
  } else {
    if (!item.children || item.children.length === 0) {
      tag = true;
    }
  }
  if (tag) {
    const ids = findFid(props.allData, item.id, []);
    if (props.showAllLevels) {
      // 推完整路径
      emits("getChooseValue", ids, item.choose);
    } else {
      // 只推当前层
      emits("getChooseValue", [item.id], item.choose);
    }
  }
}
// 通过选中的对象id获取其整个id的数据集，包括其所有的父级对象的id
function findFid(data, id, ids) {
  const nums = data.length;
  for (let i = 0; i < nums; i++) {
    if (data[i].id === id) {
      ids.unshift(data[i].id);
      return ids;
    }
    if (data[i].children !== undefined) {
      ids = findFid(data[i].children, id, ids);
      if (ids.length > 0 && ids[ids.length - 1] === id) {
        ids.unshift(data[i].id);
        return ids;
      }
    }
  }
  return ids;
}
// export default {
//   name: "treeSelectOne",
//   data() {
//     return {};
//   },
//   props: {
//     data: Array,
//     allData: Array, // 完整的树数据
//     // 是否严格的遵守父子节点不互相关联
//     checkStrictly: {
//       type: Boolean,
//       default: false,
//     },
//     // 是否多选
//     multiple: {
//       type: Boolean,
//       default: false,
//     },
//     // 是否返回完整路径数据集
//     showAllLevels: {
//       type: Boolean,
//       default: true,
//     },
//     // 选择模式，默认line，勾选模式ico
//     chooseMode: {
//       type: String,
//       default: "line",
//     },
//   },
//   updated() {
//     // console.log(this.data)
//   },
//   // components: {
//   //   treeSelectOne: treeSelectOne,
//   // },
//   methods: {
//     // 获取
//     getValue(ids, oldChoose) {
//       // 错误数据
//       // ids.push(this.chooseValue.id);
//       emits("getChooseValue", ids, oldChoose); // 继续向上传递
//     },
//     openTagChange(ids, openTag) {
//       emits("openTagChange", ids, openTag);
//     },
//     // 打开下级菜单
//     open(item) {
//       const ids = this.findFid(props.allData, item.id, []);
//       // 推完整路径，解决小程序，展开后选中父节点自动收起问题。
//       emits("openTagChange", ids, !item.openTag);
//     },
//     // 点击选中一级
//     select(item) {
//       let tag = false;
//       if (this.checkStrictly) {
//         tag = true;
//       } else {
//         if (!item.children || item.children.length === 0) {
//           tag = true;
//         }
//       }
//       if (tag) {
//         const ids = this.findFid(props.allData, item.id, []);
//         if (this.showAllLevels) {
//           // 推完整路径
//           emits("getChooseValue", ids, item.choose);
//         } else {
//           // 只推当前层
//           emits("getChooseValue", [item.id], item.choose);
//         }
//       }
//     },
//     // 通过选中的对象id获取其整个id的数据集，包括其所有的父级对象的id
//     findFid(data, id, ids) {
//       const nums = data.length;
//       for (let i = 0; i < nums; i++) {
//         if (data[i].id === id) {
//           ids.unshift(data[i].id);
//           return ids;
//         }
//         if (data[i].children !== undefined) {
//           ids = this.findFid(data[i].children, id, ids);
//           if (ids.length > 0 && ids[ids.length - 1] === id) {
//             ids.unshift(data[i].id);
//             return ids;
//           }
//         }
//       }
//       return ids;
//     },
//   },
//   mounted() {
//     // this.component("treeSelectOne", treeSelectOne);
//   },
// };
</script>

<style lang="scss" scoped>
.treeOne {
  .one {
    height: 60upx;
    overflow: hidden;
    &.active {
      color: #5c70fe;
      border-bottom: 4upx solid #5c70fe;
    }
    .jt {
      width: 30upx;
      height: 30upx;
      float: left;
      margin-top: 15upx;
      margin-right: 20upx;
    }
    .chooseTag {
      width: 30upx;
      height: 30upx;
      float: left;
      margin-top: 15upx;
      margin-right: 10upx;
    }
    .label {
      line-height: 60upx;
      float: left;
    }
  }
  .children {
    padding-left: 50upx;
  }
}
</style>
